<template>
	<MainPage>
		<template #HeaderLeft>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="70px"
			>
				<el-form-item label="商品名称" prop="goods_spu_id">
					<undercarriage
						ref="changeGoodsInputSearch"
						@clear="clear(1)"
						@sendValue="(data) => getGoodsValue(data, 1)"
					></undercarriage>
				</el-form-item>

				<el-form-item>
					<el-button class="reset marginLeft10" type="primary" @click="reset"
						>重置</el-button
					>
					<el-button
						type="primary"
						@click="getArticleList"
						:loading="listLoading"
						>搜索</el-button
					>
				</el-form-item>
			</el-form>
		</template>
		<template #HeaderRight>
			<el-button @click="dialogVisible = true"> 新增物品 </el-button>
		</template>
		<template #Table>
			<el-table
				ref="multipleTable"
				v-loading="listLoading"
				:data="list"
				element-loading-text="加载中"
				fit
				border
				highlight-current-row
			>
				<el-table-column label="序号" :show-overflow-tooltip="true" width="80">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column
					label="物品名称"
					prop="goods_name"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="单位"
					prop="unit_title"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="单价"
					prop="price"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="库存"
					prop="inventory_num"
					:show-overflow-tooltip="true"
				/>
				<el-table-column
					label="借出数量"
					prop="nickname"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						{{ scope.row.lend_num }}
					</template>
				</el-table-column>
				<el-table-column
					label="剩余数量"
					prop="nickname"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						{{ scope.row | inventory_num }}
					</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					prop="nickname"
					:show-overflow-tooltip="true"
					min-width="180"
				>
					<template slot-scope="scope">
						{{ parseTime(scope.row.created_at) }}
					</template>
				</el-table-column>
				<el-table-column
					label="管理操作"
					prop="nickname"
					:show-overflow-tooltip="true"
				>
					<template slot-scope="scope">
						<el-link type="danger" @click="deleteGoods(scope)">删除</el-link>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template #Page>
			<el-pagination
				:current-page="current.page"
				:page-sizes="[20, 30, 50, 100]"
				:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount"
				background
				@size-change="changeLimit"
				@current-change="changePage"
			/>
		</template>
		<template #Dialog>
			<el-dialog
				title="新增物品"
				:visible.sync="dialogVisible"
				class="main_dialog_copy dialog400"
				@closed="closeDialog"
			>
				<el-form
					:inline="false"
					:model="addGoodsForm"
					class="demo-form-inline"
					ref="craftInfoRef"
					label-width="100px"
					key="userListFrom1"
				>
					<el-form-item label="选择商品" prop="goods_spu_id">
						<undercarriage
							ref="changeGoodsInput"
							@clear="clear(2)"
							@sendValue="(data) => getGoodsValue(data, 2)"
						></undercarriage>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="comfirmAdd">确 定</el-button>
				</span>
			</el-dialog>
		</template>
	</MainPage>
</template>
<script>
	import MainPage from "@/components/MainPage";
	import undercarriage from "@/views/marketing/components/undercarriage.vue";
	import {
		turnover_index,
		turnover_add,
		turnover_delete,
	} from "@/api/warehouse/warehouseTurnOver";
	import { parseTime } from "@/utils/index";

	export default {
		name: "",
		components: {
			MainPage,
			undercarriage,
		},
		data() {
			return {
				parseTime,
				form: {
					goods_spu_id: "",
				},
				list: [],
				listLoading: false,
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,
				dialogVisible: false,
				addGoodsForm: {
					goods_spu_id: "",
					goods_id: "",
				},
			};
		},
		filters: {
			inventory_num(val) {
				if (val.lend_num !== null && val.lend_num !== undefined) {
					let flag =
						parseFloat(val.goods_spu.inventory.num) - parseFloat(val.lend_num);

					flag < 0 ? (flag = 0) : flag.toFixed(2);
					return flag;
				} else {
					return "";
				}
			},
		},
		created() {
			this.turnover_index();
		},
		methods: {
			getArticleList() {
				this.current.page == 1;
				this.turnover_index();
			},
			reset() {
				this.form.goods_spu_id = "";
				this.$refs["changeGoodsInputSearch"].name = "";
				this.getArticleList();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
			},
			changePage(page) {
				this.current.page = page;
			},
			getGoodsValue(data, type) {
				if (type == 1) {
					this.form.goods_spu_id = data.id;
				} else if (type == 2) {
					this.addGoodsForm.goods_spu_id = data.id;
					this.addGoodsForm.goods_id = data.goods_id;
				}
			},
			clear(type) {
				if (type == 1) {
					this.form.goods_spu_id = "";
				} else if (type == 2) {
					this.addGoodsForm.goods_spu_id = "";
					this.addGoodsForm.goods_id = "";
				}
			},
			closeDialog() {
				this.addGoodsForm.goods_spu_id = "";
				this.addGoodsForm.goods_id = "";
				this.$refs["changeGoodsInput"].name = "";
			},
			comfirmAdd() {
				if (this.addGoodsForm.goods_spu_id) {
					let data = JSON.parse(JSON.stringify(this.addGoodsForm));
					turnover_add(data).then((res) => {
						if (res.errcode == 0) {
							this.$message.success("新增成功");
							this.dialogVisible = false;
							this.turnover_index();
						} else {
							this.$message.error(res.errmsg);
						}
					});
				} else {
					this.$message.error("请选择商品");
				}
			},
			deleteGoods(scope) {
				let goods_name = scope.row.goods_name;
				this.$confirm(`确定删除【${goods_name}】吗？`, "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						let data = {
							id: scope.row.id,
						};
						turnover_delete(data).then((res) => {
							if (res.errcode == 0) {
								this.$message.success("删除成功");
								this.turnover_index();
							} else {
								this.$message.error(res.errmsg);
							}
						});
					})
					.catch(() => {});
			},
			turnover_index() {
				this.listLoading = true;
				let data = Object.assign(this.form, this.current);
				turnover_index(data).then((res) => {
					if (res.errcode == 0) {
						res.data.list.data.map((e) => {
							e.unit_title = "";
							e.price = "";
							e.inventory_num = "";
							e.goods_name = "";
							try {
								e.goods_name = `${e.goods.name}【${e.goods_spu.spu_name.title}】`;
								e.unit_title = e.goods_spu.spu_unit.title;
								e.price = e.goods_spu.inventory.price;
								e.inventory_num = e.goods_spu.inventory.num;
								e.lend_num = e.lend_num ? e.lend_num : 0;
							} catch (error) {}
						});
						this.list = res.data.list.data;
						this.totalCount = res.data.list.total;
					} else {
						console.warn(error);
					}
					this.listLoading = false;
				});
			},
		},
	};
</script>
<style lang='scss' scoped></style>
